<template>
  <div class="tenant-container">
    <honexun-header></honexun-header>

    <!--主体内容部分-->
    <div class="tenant-main">
      <div class="tenant-info">
        <div class="tenant-info-left">
          <div class="header-image">
            <img :src="nowTenant.logo"
                 alt="公司logo">
          </div>
        </div>
        <div class="tenant-info-right">
          <div class="each-group">
            <div class="label">公司名称：</div>
            <div class="value">{{nowTenant.name}}</div>
          </div>
          <div class="each-group">
            <div class="label">公司电话：</div>
            <div class="value">{{nowTenant.phone}}</div>
          </div>
          <div class="each-group">
            <div class="label">公司地址：</div>
            <div class="value">{{nowTenant.area}}</div>
          </div>
        </div>
      </div>

      <div class="tenant-tab">
        <div class="each-tab">商品信息</div>
      </div>
      <div class="tab-info">
        <div class="empty">
          <span>暂无商品信息</span>
        </div>
      </div>
    </div>

    <honexun-footer></honexun-footer>
    <honexun-footer-b></honexun-footer-b>
  </div>
</template>

<script>
  import honexunHeader from '@/layout/header_A.vue'
  import honexunFooter from '@/layout/footer_A.vue'
  import honexunFooterB from '@/layout/footer_B.vue'

  export default {
    data() {
      return {
        tenantList: {
          'liQi': {
            logo: 'https://image.qcc.com/auto/269934b67dcf7ee19ca8adfe0751595b.jpg?x-oss-process=style/logo_200',
            name: '上海励齐信息科技有限公司',
            phone: '13681998988',
            area: '上海市崇明区新河镇新申路921弄2号Q区294室(上海富盛经济开发区)'
          },
          'shuYuan': {
            logo: 'https://image.qcc.com/auto/269934b67dcf7ee19ca8adfe0751595b.jpg?x-oss-process=style/logo_200',
            name: '上海励齐信息科技有限公司',
            phone: '13681998988',
            area: '上海市崇明区新河镇新申路921弄2号Q区294室(上海富盛经济开发区)'
          }
        },
        nowTenant: {}
      }
    },
    components: {
      honexunHeader,
      honexunFooter,
      honexunFooterB
    },
    mounted() {
      this.nowTenant = this.tenantList.liQi;
    }
  }
</script>

<style scoped lang="less">
  .tenant-container {
    .tenant-main {
      .tenant-info {
        .mainViewAreaStyle();
        padding: 20px 0;
        .flex(flex-start, center);

        .tenant-info-left {
          width: 200px;
          height: 200px;

          .header-image {
            width: 150px;
            height: 150px;
            .flex(center, center);

            img {
              max-width: 100%;
              max-height: 100%;
            }
          }
        }

        .tenant-info-right {
          width: 992px;
          height: 200px;
          .flexWrap(space-between, space-between);
          padding: 10px 0 70px;

          .each-group {
            width: 100%;
            padding: 10px 20px 0;
            .flex(flex-start, flex-start);
            font-size: 16px;

            .label {
              color: @colorCommonFont;
            }

            .value {
              color: @colorGreyFont;
            }
          }
        }
      }

      .tenant-tab {
        .mainViewAreaStyle();

        .each-tab {
          width: 200px;
          height: 80px;
          font-size: 22px;
          color: @colorCommonFont;
          line-height: 80px;
        }
      }

      .tab-info {
        min-height: 180px;
        padding: 20px 0;
        .mainViewAreaStyle();

        .empty {
          width: 100%;
          height: 100%;
          .flex(center, center);
          font-size: 22px;
          color: @colorGreyFontM;
        }
      }
    }
  }
</style>
